<!--author:adminj-->
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="adminj/libs/layui/css/layui.css?v=1">
    <link rel="stylesheet" href="adminj/libs/select2/css/select2.min.css">
</head>

<body>
<span id="adminj_cpts_items" style="display: none">
        <div class="layui-form-item adminj-sort-item" id="text">
            <label class="layui-form-label">text</label>
            <div class="layui-input-inline" style="width:60%;">
                <input type="text" name="" autocomplete="off" class="layui-input" style="width: 99%;">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item adminj-sort-item adminj-group-layout-border" id="hidden">
            <label class="layui-form-label">&nbsp;</label>
            <div class="layui-input-inline" style="width:60%;">
                <input type="hidden" name="">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item adminj-sort-item" id="password">
            <label class="layui-form-label">password</label>
            <div class="layui-input-inline" style="width:60%;">
                <input type="password" name="" autocomplete="off" class="layui-input" style="width: 99%;">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>

        </div>

        <div class="layui-form-item adminj-sort-item" id="textarea">
            <label class="layui-form-label">textarea</label>
            <div class="layui-input-inline" style="width:60%;">
                <textarea class="layui-textarea" name="textarea" style="width: 99%;"></textarea>
            </div>


        </div>

        <div class="layui-form-item adminj-sort-item" id="date">
            <label class="layui-form-label">日期选择</label>
            <div class="layui-input-inline">
                <input type="text" name="" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>

        </div>

        <div class="layui-form-item adminj-sort-item" id="switch" rename="false">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" name="" lay-skin="switch" lay-filter="switch" lay-text="ON|OFF">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>

        </div>

        <div class="layui-form-item adminj-sort-item" id="select">
            <label class="layui-form-label">下拉选项</label>
            <div class="layui-input-inline">
                <select name="">
                    <option value="0" selected="">选择</option>
                    <option value="1">选项1</option>
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux"></div>

        </div>

        <div class="layui-form-item adminj-sort-item" id="select2" rename="false">
            <label class="layui-form-label" style="margin-top: -3px;">下拉多选</label>
            <div class="layui-input-inline" style="width:60%;">
                <select name="" lay-ignore="" class="select2" multiple="multiple" data-placeholder="" data-dropdown-css-class="select2-purple" style="width: 99%;">
                    <option value="0" selected="">选择</option>
                    <option value="1">选项1</option>
                </select>
            </div>

        </div>

        <div class="layui-form-item adminj-sort-item" id="radio">
            <label class="layui-form-label">单选择框</label>
            <div class="layui-input-inline" style="width:60%;">
                <input name="" type="radio" value="0" index="0" checked="" title="选择" lay-skin="primary">
                <input name="" type="radio" value="1" index="1" title="选项1" lay-skin="primary">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>

        <div class="layui-form-item adminj-sort-item" id="checkbox">
            <label class="layui-form-label">多选择框</label>
            <div class="layui-input-inline" style="width:60%;">
                <input name="" type="checkbox" value="0" index="0" checked="" title="选择" lay-skin="primary">
                <input name="" type="checkbox" value="1" index="1" title="选项1" lay-skin="primary">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>


        <div class="layui-form-item adminj-sort-item" id="dateRange">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>

        <div class="layui-form-item adminj-sort-item" id="uploadImage" rename="false">
            <label class="layui-form-label">单图上传</label>
            <div class="layui-input-inline">
                <!--button type="button" class="layui-btn" id="uploadbutf"><i class="layui-icon"></i>上传图片</button-->
                <ul class="adminj-upload-ul">
                    <li style="border: 0px;">

                        <div class="adminj-upload-image-style" update_width="true">
                            <div class="adminj-upload-image-style" style="position:relative;top:0%;" flag="upload_div">
                                <div class="layui-upload-list" style="text-align: center;line-height: 60px;">
                                    <i class="layui-icon layui-icon-upload-drag adminj-upload-icon" style="font-size: 1.8em;color: #1d6fa5;"></i>
                                    <p id="msgText" style="display: none"></p>
                                </div>
                                <div class="upload_bar_div" style="top:38%;width: 100%; display: none;position:absolute;" update_width="true">
                                    <div class="layui-progress" lay-showpercent="yes" lay-filter="layui-progress">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="adminj-upload-image-style" id="upload_image_div" style="top:5px;position:absolute;border:dashed 1px;pointer-events: none;" update_width="true">
                                <img class="layui-upload-img image_src" style="wdith:100%;height: 100px;pointer-events: none;display: none;">
                            </div>
                            <div class="adminj-upload-image-style upload_mask_div" style="top:0%;position:absolute;pointer-events: auto; display: none" update_width="true">

                            </div>
                        </div>

                    </li>
                </ul>

            </div>
            <div class="layui-form-mid layui-word-aux"></div>


        </div>

        <div class="layui-form-item adminj-sort-item" id="uploadImages" rename="false">
            <label class="layui-form-label">多图上传</label>
            <div class="layui-input-inline" style="width:80%;">
                <ul class="adminj-upload-ul">
                    <li>
                        <div class="adminj-upload-image-style" update_width="true">
                            <div class="adminj-upload-image-style" style="position:absolute;z-index: 597;" flag="upload_div">
                                <div class="layui-upload-list" style="text-align: center;line-height: 60px;">
                                    <i class="layui-icon layui-icon-upload-drag adminj-upload-icon" style="font-size: 1.8em;color: #1d6fa5;"></i>
                                    <p id="msgText" style="display: none"></p>
                                </div>
                                <div class="upload_bar_div" style="top:45%;width: 100%; display: none;position:absolute;" update_width="true">
                                    <div class="layui-progress" lay-showpercent="yes" lay-filter="layui-progress">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="adminj-upload-image-style" id="upload_image_div" style="position:absolute;z-index: 598;border:dashed 0px red;pointer-events: none;" update_width="true">
                                <img class="layui-upload-img image_src" style="wdith:100%;height: 100px;pointer-events: none;display: none;">
                            </div>
                            <div class="adminj-upload-image-style upload_mask_div" style="position:absolute;z-index: 599;pointer-events: auto; display: none" update_width="true">

                            </div>

                            <div class="close_div adminj-upload-tools-div adminj-upload-image-style" style="pointer-events: none;position:absolute;z-index: 600;border:dotted 0px red; " update_width="true">
                                <div style="position:absolute;pointer-events: auto;cursor:pointer;background-color:#1d6fa5;top:-8px;right: -10px;border-radius:10px;height: 18px;width: 18px;line-height: 18px;">
                                    <i class="layui-icon layui-icon-close" style="font-size: 15px; color:#ffffff;padding: 1px;"></i>
                                </div>
                            </div>

                        </div>


                    </li>

                    <li class="adminj-upload-image-style adminj-add-upload-div" style=" border: dashed 1px #1d6fa5;text-align: center">
                        <span class="layui-icon layui-icon-add-circle-fine" style="font-size: 2em; color: #1d6fa5;line-height: 80px;"></span>
                    </li>

                </ul>

            </div>


        </div>


        <div class="layui-form-item adminj-sort-item" id="uploadFile" rename="false">
            <label class="layui-form-label">上传文件</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="uploadFile"><i class="layui-icon"></i>上传文件</button>
            </div>
            <div class="layui-input-inline adminj-upload-empty-div" style="margin-left: -60px; margin-bottom: 18px; margin-top: 18px;display:none"><div class="layui-progress" lay-filter="" lay-showpercent="true"><div class="layui-progress-bar" lay-percent="0%"></div></div></div>
<div class="layui-form-mid layui-word-aux"></div>


        </div>


        <div class="layui-form-item adminj-sort-item" id="uploadFiles" rename="false">
            <label class="layui-form-label">多文件上传</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" select_file="true">选择多文件</button>
                    <button type="button" class="layui-btn" upload_file="true"><i class="layui-icon"></i>上传文件</button>
                    <div class="layui-upload-list" style="max-width: 1000px;">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col width="150">
                                <col width="260">
                                <col width="150">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>上传进度</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="fileList"></tbody>
                        </table>
                    </div>
                    <!--button type="button" class="layui-btn" id="uploadListAction">开始上传</button-->
                </div>
            </div>

        </div>


        <div class="layui-form-item adminj-sort-item" id="color">
            <label class="layui-form-label">颜色选择</label>
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="" class="layui-input">
            </div>
            <div class="layui-inline">
                <div flag="color_ui_div"></div>
            </div>


        </div>

        <div id="submitData" class="layui-form-item adminj-sort-item" rename="false">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="postButton" id="postButton">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>

        </div>

        <div class="layui-form-item layui-row  adminj-sort-item" id="groupLayout" rename="false">
            <div class="adminj-col-item adminj-group-layout-border layui-col-md6">
            </div>
            <div class="adminj-col-item adminj-group-layout-border layui-col-md6">
            </div>
        </div>


        <div class="layui-form-item adminj-sort-item" id="slider">
            <label class="layui-form-label">滑块</label>
            <div class="layui-input-inline" style="width: 60%;">
                <div style="margin-left: 10px; margin-bottom: 18px; margin-top: 18px;"></div>
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>


        <div class="layui-form-item adminj-sort-item" id="rate">
            <label class="layui-form-label">评分</label>
            <div class="layui-input-inline" style="width: 60%;">
                <div style="margin-left: 10px; "></div>
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>

        <div class="layui-form-item adminj-sort-item" id="selectS">
            <label class="layui-form-label">无限级联动</label>

            <div class="layui-form-mid layui-word-aux"></div>
        </div>

        <div class="layui-tab layui-tab-brief adminj-sort-item" id="tab" rename="false">
            <ul class="layui-tab-title">
                <li class="layui-this">选择</li>
                <li>选项1</li>
            </ul>
            <div class="layui-tab-content" style="height: 100%">
                <div class="layui-tab-item layui-show adminj-col-item" style="border: 1px dashed cadetblue;min-height: 200px;"></div>
                <div class="layui-tab-item adminj-col-item" style="border: 1px dashed cadetblue;min-height: 200px;">
                </div>
            </div>
        </div>


        <div class="layui-form-item adminj-sort-item" id="editor">
            <label class="layui-form-label">文本编辑器</label>
            <div class="layui-input-block" style="width:78%;  ">
                <div class="editor">
                    <h2>Bilingual Personality Disorder</h2>
                    <figure class="image image-style-side"><img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
                        <figcaption>One language, one person.</figcaption>
                    </figure>
                    <p>
                        adults who are bilingual in English in French were showed series of pictures and were asked to
                        create 3-minute stories.
                        In the end participants emphasized drastically different dynamics for stories in English and
                        French.
                    </p>
                    <p>
                        Another ground-breaking experiment which included bilingual Japanese women married to American
                        men in San Francisco were
                        asked to complete sentences. The goal of the experiment was to investigate whether or not human
                        feelings and thoughts
                        are expressed differently in <strong>different language mindsets</strong>.
                        <here>is a sample from the the experiment:</here>
                    </p>
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>English</th>
                                <th>Japanese</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Real friends should</td>
                                <td>Be very frank</td>
                                <td>Help each other</td>
                            </tr>
                            <tr>
                                <td>I will probably become</td>
                                <td>A teacher</td>
                                <td>A housewife</td>
                            </tr>
                        </tbody>
                    </table>
                    <p>
                        More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the
                        language a person speaks affects
                        their cognition, behaviour, emotions and hence <strong>their personality</strong>.
                        This shouldn’t come as a surprise
                        <a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already
                            know</a> that different regions
                        of the brain become more active depending on the person’s activity at hand. Since structure,
                        information and especially
                        <strong>the culture</strong> of languages varies substantially and the language a person speaks
                        is an essential element of daily life.
                    </p>
                </div>
            </div>
        </div>


    </span>



<form class="layui-form" id="form" lay-filter="form" action="">
    <div id="sortable" style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;">
    </div>
</form>
</body>
<script src="adminj/libs/layui/layui.js?2.6.8"></script>
<script src="adminj/libs/jquery/jquery-3.6.0.min.js"></script>
<script src="adminj/libs/select2/js/select2.full.min.js"></script>
<script src="adminj/libs/ckeditor5/ckeditor.js"></script>

<script src="adminj/modules/adminj_utils.js"></script>

</html>



<script>
    layui.config({
        //dir: '/res/layui/'
        version: false
        , debug: false
        , base: './adminj/modules/'
    }).use(['adminJLayuiFormRender', 'adminJFormData'], function() {
        var formRender = layui.adminJLayuiFormRender;
        formRender.render({id:'adminJLayuiFormRender'});

        var adminJFormData = layui.adminJFormData;

        var _json = window.localStorage.getItem('form_json');

        formRender.importHtmlJSON(_json);

        adminJFormData.init(_json,'form')
        try {
            var d={'aaa':'00'}
            adminJFormData.setData('form', d);
        } catch (e) {
            console.log(e)
        }
        layui.form.on('submit(postButton)', function (data) {
            try {
                if (!adminJFormData.validate('form')) {//
                    return false;
                }
                var data = adminJFormData.getData('form')
                var val = JSON.stringify(data);
                layui.layer.msg(val)
                console.log(val)

            } catch (e) {
                console.log(e);
            }

            return false;
        });


    });



</script>